<template>
  <Fieldset legend="Base Theme" :toggleable="true">
    <div class="flex flex-col gap-4 p-4 rounded-md border border-surface-200 dark:border-surface-700">
      <span class="text-muted-color">Variety of built-in themes with distinct characteristics.</span>
      <SelectButton
        v-model="SelectPreset"
        @update:modelValue="onPresetChange"
        :options="presetOptions"
        optionLabel="label"
        optionValue="value"
        :allowEmpty="false"
      />
    </div>
  </Fieldset>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue'
  import { useThemeStore } from '@/stores/useThemeStore'
  import { themesList } from '@/stores/useThemeStore'
  import type { Theme } from '@/stores/useThemeStore'
  import { deepClone } from '@/stores/useThemeStore'

  const presetOptions = computed(() =>
    Object.entries(themesList).map(([key, theme]) => ({
      label: key,
      value: theme,
    }))
  )
  const themeStore = useThemeStore()
  const SelectPreset = ref('')

  const onPresetChange = (value: Theme) => {
    themeStore.TempTheme = deepClone(value)
  }
</script>
